<template>
    <Icon icon="line-md:loading-loop" class="w-5 h-5 mx-1 mb-1"></Icon>
    <!-- <div class="loading-animation">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div> -->
</template>
  
<script setup>
import { Icon } from '@iconify/vue';
// 简单的加载动画组件，显示三个闪烁的圆点
</script>
  
<style scoped>
.loading-animation {
    display: flex;
    align-items: center;
    padding: 7px 0;
}
  
.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #888;
    margin: 0 4px;
    animation: blink 1.4s infinite ease-in-out both;
}
  
.dot:nth-child(2) {
    animation-delay: 0.2s;
}
  
.dot:nth-child(3) {
    animation-delay: 0.4s;
}
  
  /* 
    关键帧动画（@keyframes blink）
        定义了一个名为 blink 的关键帧动画。
        在 0%、80% 和 100% 时，圆点完全透明（opacity: 0）。
        在 40% 时，圆点完全不透明（opacity: 1）。
        这样每个圆点会在一个周期内经历：淡入→淡出→保持透明的过程。 
    */
  @keyframes blink {
    0%, 80%, 100% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
  }
  </style>
  